define(['jquery', 'underscore', 'backbone', 'jquery-ui'], function($, _, Backbone) {

  // /v2/health/hra/uhchraajax/avatar?userId=2&attr=avatarSkin&val=blue&done=1
  Backbone.$ = $;
  var appOptions = {};

  var exports = {};

  var defaultStyle = {
    'defaulatHairColor':{'Bald':'','BoyCut':'Black','Buzz':'Black','Long':'Black','SideHair':'Black'},
    'defaulatFacialHairColor':{'NoFacial':'','Beard':'Black','FullFacial':'Black','Mustache':'Black','SideBurns':'Black'},
    'defaulatTopColor':{'Longsleeve':'Black','Polo':'Black','Sweater':'Black','Tshirt':'Black','Vest':'Black'},
    'defaulatBottomColor':{'AthleticShorts':'Black','Overall':'Black','Pants':'Black','Shorts':'Black','SweatPants':'Black'},
    'defaulatGlassesColor':{'Aviator':'','RayBan':'Black','Reader':'Black','Star':'Black','Wireframe':''},
    'defaulatHatsColor':{'BallCap':'Black','Bowler':'Black','CowboyHat':'Black','Fedora':'Black','StockingHat':'Blue','TopHat':'Black'}
    };

  //value=1: data-val need to send pair attr ajax, 0: send single attr ajax
  var sendPairAttr = {
    'avatarSkin': 0,
    'avatarHairStyle':0,
    'avatarHairColor':0,
    'avatarFacialHairStyle':0,
    'avatarFacialHairColor':0,
    'avatarTopStyle': 1,
    'avatarTopColor':1,
    'avatarBottomStyle':1,
    'avatarBottomColor':1,
    'avatarGlassesStyle':1,
    'avatarGlassesColor':1,
    'avatarHatsStyle':1,
    'avatarHatsColor':1,
    'avatarAccessoriesStyle': 1,
    'avatarAccessoriesColor': 1,
    'avatarShoesStyle':1,
    'avatarShoesColor':1,
    'avatarJewelryStyle':1,
    'avatarJewelryColor':1
  };

   var AvatarMale = Backbone.Model.extend({
    /* model attribute name = attr query parameter
    *  model attribute value = val query parameter */
    defaults: {
          'avatarSkin': 'Brown',
          'avatarHairStyle':'BoyCut',
          'avatarHairColor':'Black',
          'avatarFacialHairStyle':'NoFacial',
          'avatarFacialHairColor':'Black',
          'avatarTopStyle': 'Tshirt',
          'avatarTopColor':'Blue',
          'avatarBottomStyle':'Overalls',
          'avatarBottomColor':'Jean',
          'avatarGlassesStyle':'none',
//          'avatarGlassesColor':'Black',
          'avatarHatsStyle':'none',
//          'avatarHatsColor':'Black',
          'avatarAccessoriesStyle': 'none',
//          'avatarAccessoriesColor': 'Blue',
          'avatarShoesStyle':'none'
//          'avatarShoesColor':'Black'
        }
  });
  var AvatarFemale = Backbone.Model.extend({
    /* model attribute name = attr query parameter
    *  model attribute value = val query parameter */
    defaults: {
          'avatarSkin': 'Brown',
          'avatarHairStyle':'Bob',
          'avatarHairColor':'Black',
          'avatarTopStyle': 'Blouse',
          'avatarTopColor':'Black',
          'avatarBottomStyle':'DressPants',
          'avatarBottomColor':'Black',
          'avatarGlassesStyle':'none',
//          'avatarGlassesColor':'Black',
          'avatarHatsStyle':'none',
//          'avatarHatsColor':'Black',
          'avatarJewelryStyle':'none',
//          'avatarJewelryColor':'Black',
          'avatarAccessoriesStyle': 'none',
//          'avatarAccessoriesColor': 'Blue',
          'avatarShoesStyle':'none'
//          'avatarShoesColor':'Black'
        }
  });

  var AvatarView = Backbone.View.extend({

    el: '.hra-avatar-builder',

    events: {
//      'mouseup [data-val]': function( event ){
//        event.preventDefault();
//      },
//      'click [data-val]': function( event ){
//        event.preventDefault();
//      },
      'click [data-val]': function( event ) {
        var $this = $( event.target ),
            val = $this.attr( 'data-val' ),
            $ulObj = $this.parents( '[data-attr]' ),
            attr = $ulObj.attr( 'data-attr' ),
            attr2, val2,querystr;

        event.preventDefault();

        // console.log( $this );
        // console.log( val, 'val' );
        // console.log( attr, 'attr' );
        //hack to store current changed attr
        this.model.currentChangedAttr = {};
        this.model.currentChangedAttr[attr] = val;
        this.model.unset(attr,{silent: true});
        this.model.set(attr,val);
        $ulObj.find('[data-val]').removeClass('selected').parent('.hra-avatar-item-wrapper').removeClass('selected');
        this.$el.find('[data-val="' + val + '"]').addClass('selected').parent('.hra-avatar-item-wrapper').addClass('selected');
//        this.updateSubOptions(attr,val);
       // ajax call to update database
        if ( appOptions.saveAvatarState !== false ) {
          //send ajax for
          // 1. attr which do not need pair attr
          // 2. attr pair (color attr with its style attr)
          if(sendPairAttr[attr] === 0){
//            $.ajax({
//                  url: "/v2/health/hra/uhchraajax/avatar",
//                  data:{
//                    "attr": attr,
//                    "val": val
//                  },
//                  dataType: 'json',
//                  cache:false
//            });
          }else if(val === "none" ){//also set color is null in database
            attr2 = attr.replace('Style','Color');
            val2 = 'none';
            querystr = 'attr='+attr+'&val='+val+'&attr='+attr2+'&val='+val2;
//            $.ajax({
//                  url: "/v2/health/hra/uhchraajax/avatar",
//                  data:querystr,
//                  dataType: 'json',
//                  cache:false
//            });

          }else if(attr.indexOf('Color') !== -1){
            attr2 = attr.replace('Color','Style');
            val2 = this.model.get(attr2);
            querystr = 'attr='+attr+'&val='+val+'&attr='+attr2+'&val='+val2;
//            $.ajax({
//                  url: "/v2/health/hra/uhchraajax/avatar",
//                  data:querystr,
//                  dataType: 'json',
//                  cache:false
//            });
          }
        }

        this.updateSubOptions(attr, val);

      },
      'click .nav-right': function(event){
        event.preventDefault();

        var $liObjs = this.$el.find('.ui-tabs-nav >li'),
            firstVisableItem = $($liObjs).index(this.$el.find('.ui-tabs-nav >li:visible')[0]),
            lastVisableItem = $($liObjs).index(this.$el.find('.ui-tabs-nav >li.half-hidden'));

        if(firstVisableItem >= 0 && firstVisableItem <= 2){//move to left
          $liObjs.removeClass('half-hidden');
          this.$el.find('.ui-tabs-nav >li:lt('+ firstVisableItem + ')').addClass("hidden");
          this.$el.find('.ui-tabs-nav >li:eq('+ firstVisableItem + ')').addClass("hidden");
          this.$el.find('.ui-tabs-nav >li:gt('+ firstVisableItem + ')').removeClass("hidden");
          if(lastVisableItem !== -1)this.$el.find('.ui-tabs-nav >li:eq('+ (lastVisableItem + 1) + ')').addClass("half-hidden");
        }
      },
      'click .nav-left': function(event){
        event.preventDefault();

        var $liObjs = this.$el.find('.ui-tabs-nav >li'),
            firstVisableItem = $($liObjs).index(this.$el.find('.ui-tabs-nav >li:visible')[0]),
            lastVisableItem = $($liObjs).index(this.$el.find('.ui-tabs-nav >li.half-hidden'));

        if (firstVisableItem >= 1 && firstVisableItem <= 3) {//move to left
          $liObjs.removeClass('half-hidden');
          this.$el.find('.ui-tabs-nav >li:eq(' + (firstVisableItem - 1) + ')').removeClass("hidden");
          this.$el.find('.ui-tabs-nav >li:gt(' + firstVisableItem + ')').removeClass("hidden");
          if(lastVisableItem !== -1)this.$el.find('.ui-tabs-nav >li:eq('+ (lastVisableItem - 1) + ')').addClass("half-hidden");
          else if(lastVisableItem === -1 && firstVisableItem === 3) this.$el.find('.ui-tabs-nav >li:last-child').addClass("half-hidden");
        }
      }
//      'click .ui-tabs-anchor': function(event){
//        event.preventDefault();
//
//        var $this = $( event.target ),
//            link =  $this.parents( '[href]' ).attr( 'href' );
//            $contentObj = this.$el.find(link);
//        console.log('link='+link);
//        this.$el.find('.ui-tabs-anchor').removeClass('selected');
//        $this.parents( '[href]' ).addClass('selected');
//        this.updateOptionsPanel($contentObj);
//      }
      //hra-avatar-avatar-hair
    },

    initialize: function() {
      var $genderObj, $attrObj, gender, $firstTab, that = this;
      var $tabsObj = $('.hra-avatar-builder-tabs');
      var level =  that.model.get('level'),disabletabs=[];
      gender = this.model.get('gender');
      //hats locked when level<5; accessories locked when level<7
      if(level<5 && gender==="male"){
            disabletabs =[7,8];
      }else if(level<5 && gender==="female"){
            disabletabs =[6,7,8];
      }else if(level>=5 && level<7 && gender==="male"){
            disabletabs =[8];
      }else if(level>=5 && level<7 && gender==="female"){
            disabletabs =[7,8];
      }

      this.model.on( 'change', this.render, this );
      // reference to preview div
      this.$preview = $( '.hra-avatar-builder-preview');
      $genderObj = this.$preview.find('.gender');
      $genderObj.html("");
      //initialize dom
      $genderObj.addClass(gender);
      $attrObj = $('<div class="avatarSkin"></div>');
      $attrObj.addClass(this.model.get('avatarSkin'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarHairStyle avatarHairColor"></div>');
      $attrObj.addClass(this.model.get('avatarHairStyle')).addClass(this.model.get('avatarHairColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarFacialHairStyle avatarFacialHairColor"></div>');
      $attrObj.addClass(this.model.get('avatarFacialHairStyle')).addClass(this.model.get('avatarFacialHairColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarTopStyle avatarTopColor"></div>');
      $attrObj.addClass(this.model.get('avatarTopStyle')).addClass(this.model.get('avatarTopColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarShoesStyle avatarShoesColor"></div>');
      $attrObj.addClass(this.model.get('avatarShoesStyle')).addClass(this.model.get('avatarShoesColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarBottomStyle avatarBottomColor"></div>');
      $attrObj.addClass(this.model.get('avatarBottomStyle')).addClass(this.model.get('avatarBottomColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarGlassesStyle avatarGlassesColor"></div>');
      $attrObj.addClass(this.model.get('avatarGlassesStyle')).addClass(this.model.get('avatarGlassesColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarHatsStyle avatarHatsColor"></div>');
      $attrObj.addClass(this.model.get('avatarHatsStyle')).addClass(this.model.get('avatarHatsColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarJewelryStyle avatarJewelryColor"></div>');
      $attrObj.addClass(this.model.get('avatarJewelryStyle')).addClass(this.model.get('avatarJewelryColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarAccessoriesStyle avatarAccessoriesColor"></div>');
      $attrObj.addClass(this.model.get('avatarAccessoriesStyle')).addClass(this.model.get('avatarAccessoriesColor'));
      $genderObj.append($attrObj);

       //update level
//      if(this.model.get("level")<5)$tabsObj.addClass('avatar-level-less-5');
//      if(this.model.get("level")<8)$tabsObj.addClass('avatar-level-less-7');

      this.render();

      // initialize jquery ui tabs
      if(gender === 'male'){
        $('.hra-avatar-builder-tabs-female').remove();
        $('.hra-avatar-builder-tabs-male').find('.ui-tabs-anchor img').attr('src','/~junwang/home/js/projects/avatar/img/avatar/sprites/avatar-male-topnav-sprite.png');
      }
      if(gender === 'female'){
        $('.hra-avatar-builder-tabs-male').remove();
        $('.hra-avatar-builder-tabs-female').find('.ui-tabs-anchor img').attr('src','/~junwang/home/js/projects/avatar/img/avatar/sprites/avatar-female-topnav-sprite.png');
      }

      //for testing
      // console.log("avatar builder jquery:"+$().jquery);
      // console.log("avatar builder jquery.ui:"+$.ui.version);
      this.$tabs = $tabsObj.tabs({
        activate: function(event, ui){
          event.preventDefault();

          var $this = $(event.target),
              newIndex = ui.newTab.index(),
              $tabsObj = $("#hra .hra-avatar-builder-tabs"),
              link = $(ui.newTab.context).attr('href'),
              $contentObj = $tabsObj.find(link);

          // console.log('link=' + link);
          $('.ui-tabs-anchor',$tabsObj).removeClass('selected');
//          $this.parents('[href]').addClass('selected');
          $this.find('.ui-state-active a.ui-tabs-anchor').addClass('selected');
          that.updateOptionsPanel($contentObj);
        }
      });
      this.$tabs.tabs( "option", "disabled", disabletabs );

      $('#hra').find('.hra-avatar-builder').css('visibility','visible');
      //select skin
      $firstTab =  $('.ui-tabs-anchor:eq(0)');
      $firstTab.addClass('selected');
      this.updateOptionsPanel($($firstTab.attr('href')));
      // console.log( this.model.attributes, 'View Initialized' );
    },

    render: function() {
      // update the avatar preview here (do something to this.$preview)
      var $attrObj, changedAttrs =  this.model.changedAttributes()||this.model.currentChangedAttr,attr, attrStyle, prevAttrStyle, matchAttr;

      for(attr in changedAttrs){
//        prevAttr = this.model.previous(attr);
        $attrObj = this.$preview.find('.'+attr);
        //update view
        if(sendPairAttr[attr] === 0 || this.model.get(attr) === "none"){//single attr, update avatar view
//          if(prevAttr){
//            $attrObj.removeClass(prevAttr).addClass(this.model.get(attr));
          if(attr === 'avatarSkin'){
            $attrObj.removeClass().addClass(attr).addClass(this.model.get(attr));
          }else{
            matchAttr = (attr.indexOf('Color') !== -1)? attr.replace('Color','Style'):attr.replace('Style','Color');
            $attrObj.removeClass().addClass(attr).addClass(this.model.get(attr)).addClass(matchAttr).addClass(this.model.get(matchAttr));
          }
        }else if(attr.indexOf('Color') !== -1){// pair attr, update avatar view only when Color click
          attrStyle = attr.replace('Color','Style');
          $attrObj.removeClass().addClass(attr).addClass(this.model.get(attr)).addClass(attrStyle).addClass(this.model.get(attrStyle));
        }
      }
      // get this.model attributes and do DOM manipulation to draw the avatar
      // console.log( this.model.attributes, 'View Updated' );

    },
//    updateDatabase: function(attr,val){
//       // ajax call to update database
//
//       if ( appOptions.saveAvatarState !== false ) {
//        $.ajax({
//                url: "/v2/health/hra/uhchraajax/avatar",
//                data:{
//                  "attr": attr,
//                  "val": val
//                },
//                dataType: 'json',
//                cache:false,
//                success: function(){
//                  // console.log(attr + ":"+val);
//                }
//            });
//      }
//    },
    updateOptionsPanel: function($contentObj){
      var idname = $contentObj.attr('id');
      var $colorObj, val, $contentUl ;
      $('.ui-tabs-panel.current-panel',this.$el).removeClass('current-panel');
      $('#'+idname,this.$el).addClass('current-panel');
      switch(idname){
        case 'hra-avatar-avatar-skin':
          $(('a[data-val]'),$contentObj.find('ul[data-attr="avatarSkin"]')).removeClass('selected').parent('.hra-avatar-item-wrapper').removeClass('selected');
          $(('a[data-val="'+ this.model.get('avatarSkin')+'"]'),$contentObj.find('ul[data-attr="avatarSkin"]')).addClass('selected').parent('.hra-avatar-item-wrapper').addClass('selected');
        break;
        case 'hra-avatar-avatar-hair':
          val = this.model.get('avatarHairColor');
          $contentUl = $contentObj.find('ul[data-attr="avatarHairStyle"]');
          $('li',$contentObj.find('ul[data-attr="avatarHairStyle"]')).removeClass().addClass(val);
          $(('a[data-val]'),$contentObj.find('ul[data-attr="avatarHairColor"]')).removeClass('selected').parent('.hra-avatar-item-wrapper').removeClass('selected');
          $(('a[data-val="'+ this.model.get('avatarHairColor')+'"]'),$contentObj.find('ul[data-attr="avatarHairColor"]')).addClass('selected').parent('.hra-avatar-item-wrapper').addClass('selected');
          $(('a[data-val]'),$contentUl).removeClass('selected');
          $(('a[data-val="'+ this.model.get('avatarHairStyle')+'"]'),$contentObj.find('ul[data-attr="avatarHairStyle"]')).addClass('selected').parent('.hra-avatar-item-wrapper').addClass('selected');
//          if(val !== "Black")$('li:nth-child(6)',$contentUl).addClass('hidden');
        break;
        case 'hra-avatar-avatar-facial-hair':
          $('li',$contentObj.find('ul[data-attr="avatarFacialHairStyle"]')).removeClass().addClass(this.model.get('avatarFacialHairColor'));
          $(('a[data-val]'),$contentObj.find('ul[data-attr="avatarFacialHairColor"]')).removeClass('selected').parent('.hra-avatar-item-wrapper').removeClass('selected');
          $(('a[data-val="'+ this.model.get('avatarFacialHairColor')+'"]'),$contentObj.find('ul[data-attr="avatarFacialHairColor"]')).addClass('selected').parent('.hra-avatar-item-wrapper').addClass('selected');
          $(('a[data-val]'),$contentObj.find('ul[data-attr="avatarFacialHairStyle"]')).removeClass('selected');
          $(('a[data-val="'+ this.model.get('avatarFacialHairStyle')+'"]'),$contentObj.find('ul[data-attr="avatarFacialHairStyle"]')).addClass('selected').parent('.hra-avatar-item-wrapper').addClass('selected');
        break;
        case 'hra-avatar-avatar-top':
//          this.model.set('avatarTopColor','Black');
          $contentObj.find('ul[data-attr="avatarTopStyle"]').removeClass('hidden');
          $contentObj.find('ul[data-attr="avatarTopColor"]').addClass('hidden');
          $(('a[data-val]'),$contentObj.find('ul[data-attr="avatarTopStyle"]')).removeClass('selected').parent('.hra-avatar-item-wrapper').removeClass('selected');
          $(('a[data-val="'+ this.model.get('avatarTopStyle')+'"]'),$contentObj.find('ul[data-attr="avatarTopStyle"]')).addClass('selected').parent('.hra-avatar-item-wrapper').addClass('selected');
//          this.updateDatabase("avatarTopColor",this.model.get("avatarTopColor"));
        break;
        case 'hra-avatar-avatar-bottom':
//          this.model.set('avatarBottomColor','Black');
//          if(this.model.get('avatarBottomStyle')==="FlareJeans" || this.model.get('avatarBottomStyle')==="SkinnyJeans"){
//            this.model.set('avatarBottomColor','Blue');
//          }
//          if(this.model.get('avatarBottomStyle')==="Overalls"){
//            this.model.set('avatarBottomColor','Jean');
//          }
          $contentObj.find('ul[data-attr="avatarBottomStyle"]').removeClass('hidden');
          $contentObj.find('ul[data-attr="avatarBottomColor"]').addClass('hidden');
          $(('a[data-val]'),$contentObj.find('ul[data-attr="avatarBottomStyle"]')).removeClass('selected').parent('.hra-avatar-item-wrapper').removeClass('selected');
          $(('a[data-val="'+ this.model.get('avatarBottomStyle')+'"]'),$contentObj.find('ul[data-attr="avatarBottomStyle"]')).addClass('selected').parent('.hra-avatar-item-wrapper').addClass('selected');
//          this.updateDatabase("avatarBottomColor",this.model.get("avatarBottomColor"));
        break;
        case 'hra-avatar-avatar-glasses':
          $contentObj.find('ul[data-attr="avatarGlassesStyle"]').removeClass('hidden');
          $contentObj.find('ul[data-attr="avatarGlassesColor"]').addClass('hidden');
          $(('a[data-val]'),$contentObj.find('ul[data-attr="avatarGlassesStyle"]')).removeClass('selected').parent('.hra-avatar-item-wrapper').removeClass('selected');
          $(('a[data-val="'+ this.model.get('avatarGlassesStyle')+'"]'),$contentObj.find('ul[data-attr="avatarGlassesStyle"]')).addClass('selected').parent('.hra-avatar-item-wrapper').addClass('selected');
        break;
        case 'hra-avatar-avatar-hats':
          $contentUl = $contentObj.find('ul[data-attr="avatarHatsStyle"]');
          $contentObj.find('ul[data-attr="avatarHatsStyle"]').removeClass('hidden');
          $contentObj.find('ul[data-attr="avatarHatsColor"]').addClass('hidden');
          $(('a[data-val]'),$contentObj.find('ul[data-attr="avatarHatsStyle"]')).removeClass('selected').parent('.hra-avatar-item-wrapper').removeClass('selected');
          $(('a[data-val="'+ this.model.get('avatarHatsStyle')+'"]'),$contentObj.find('ul[data-attr="avatarHatsStyle"]')).addClass('selected').parent('.hra-avatar-item-wrapper').addClass('selected');
          if(this.model.get('gender')==='female'){
            nextprevHandler($contentUl,null);
          }
        break;
        case 'hra-avatar-avatar-jewelry':
          $contentObj.find('ul[data-attr="avatarJewelryStyle"]').removeClass('hidden');
          $contentObj.find('ul[data-attr="avatarJewelryColor"]').addClass('hidden');
          $(('a[data-val]'),$contentObj.find('ul[data-attr="avatarJewelryStyle"]')).removeClass('selected').parent('.hra-avatar-item-wrapper').removeClass('selected');
          $(('a[data-val="'+ this.model.get('avatarJewelryStyle')+'"]'),$contentObj.find('ul[data-attr="avatarJewelryStyle"]')).addClass('selected').parent('.hra-avatar-item-wrapper').addClass('selected');
        break;
        case 'hra-avatar-avatar-accessories':
          $contentObj.find('ul[data-attr="avatarAccessoriesStyle"]').removeClass('hidden');
          $contentObj.find('ul[data-attr="avatarAccessoriesColor"]').addClass('hidden');
          $(('a[data-val]'),$contentObj.find('ul[data-attr="avatarAccessoriesStyle"]')).removeClass('selected').parent('.hra-avatar-item-wrapper').removeClass('selected');
          $(('a[data-val="'+ this.model.get('avatarAccessoriesStyle')+'"]'),$contentObj.find('ul[data-attr="avatarAccessoriesStyle"]')).addClass('selected').parent('.hra-avatar-item-wrapper').addClass('selected');
        break;
        case 'hra-avatar-avatar-shoes':
          $contentObj.find('ul[data-attr="avatarShoesStyle"]').removeClass('hidden');
          $contentObj.find('ul[data-attr="avatarShoesColor"]').addClass('hidden');
          $(('a[data-val]'),$contentObj.find('ul[data-attr="avatarShoesStyle"]')).removeClass('selected').parent('.hra-avatar-item-wrapper').removeClass('selected');
          $(('a[data-val="'+ this.model.get('avatarShoesStyle')+'"]'),$contentObj.find('ul[data-attr="avatarShoesStyle"]')).addClass('selected').parent('.hra-avatar-item-wrapper').addClass('selected');
        break;

        default:
      }
    },
    updateSubOptions: function(attr,val){
      var $contentUl, html, $styleObj, attrColor = attr.replace('Style','Color');
      if(val === 'none'){
        this.model.set(attrColor,'none');
        return;
      }
      if(this.model.get('gender')==='male'){
        switch (attr) {
        case 'avatarHairColor':
          $contentUl = this.$el.find('#hra-avatar-avatar-hair ul[data-attr="avatarHairStyle"]');
          $('li',$contentUl).removeClass().addClass(val);
//          if(val !== "Black")$('li:nth-child(6)',$contentUl).addClass('hidden');
          break;
        case 'avatarFacialHairColor':
          $contentUl = this.$el.find('#hra-avatar-avatar-facial-hair ul[data-attr="avatarFacialHairStyle"]');
          $('li',$contentUl).removeClass().addClass(val);
          break;
        case 'avatarTopStyle':
//          this.model.set('avatarTopColor','Black');
          $styleObj = this.$el.find('#hra-avatar-avatar-top ul[data-attr="avatarTopStyle"]');
          $styleObj.addClass('hidden');
          $contentUl = this.$el.find('#hra-avatar-avatar-top ul[data-attr="avatarTopColor"]');
          $contentUl.removeClass('hidden');

          switch (val) {//dynamic content for colors
            case 'Tshirt':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Top Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Orange" title="Orange"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Green" title="Green"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Grey" title="Grey"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Hawiian" title="Hawiian"></a></div></li>' +
                      '<li><a href="#" class="next"></a></li>' +
                      '<li><a href="#" class="prev"></a></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="GreenStripe" title="GreenStripe"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Stripe" title="Stripe"></a></div></li>';
              break;
            case 'Polo':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Top Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Green" title="Green"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Grey" title="Grey"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Orange" title="Orange"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Plaid" title="Plaid"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><a href="#" class="next"></a></li>' +
                      '<li><a href="#" class="prev"></a></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="RedStripe" title="RedStripe"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Stripe" title="Stripe"></a></div></li>';
              break;
            case 'LongSleeve':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Top Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Orange" title="Orange"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Green" title="Green"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Grey" title="Grey"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="OrangeFlannel" title="OrangeFlannel"></a></div></li>' +
                      '<li><a href="#" class="next"></a></li>' +
                      '<li><a href="#" class="prev"></a></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Stripe" title="Stripe"></a></div></li>'+
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="RedFlannel" title="RedFlannel"></a></div></li>' ;
              break;
            case 'Sweater':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Top Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Orange" title="Orange"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Green" title="Green"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Grey" title="Grey"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Argyle" title="Argyle"></a></div></li>' +
                      '<li><a href="#" class="next"></a></li>' +
                      '<li><a href="#" class="prev"></a></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="ZigZag" title="ZigZag"></a></div></li>'+
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Stripe" title="Stripe"></a></div></li>' ;
              break;
            case 'Vest':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Top Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Orange" title="Orange"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Green" title="Green"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Grey" title="Grey"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Argyle" title="Argyle"></a></div></li>' +
                      '<li><a href="#" class="next"></a></li>' +
                      '<li><a href="#" class="prev"></a></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="BlackWhite" title="BlackWhite"></a></div></li>'+
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="BrownPattern" title="BrownPattern"></a></div></li>' ;
              break;
            default:
          }
          $contentUl.html(html);
          $('li',$contentUl).removeClass().addClass(val);
          nextprevHandler($contentUl,$styleObj);
//          this.updateDatabase("avatarTopColor",this.model.get("avatarTopColor"));
          break;
        case 'avatarBottomStyle':
//          this.model.set('avatarBottomColor','Black');
//          if(this.model.get('avatarBottomStyle')==="Overalls"){
//            this.model.set('avatarBottomColor','Jean');
//          }
          $styleObj = this.$el.find('#hra-avatar-avatar-bottom ul[data-attr="avatarBottomStyle"]');
          $styleObj.addClass('hidden');
          $contentUl = this.$el.find('#hra-avatar-avatar-bottom ul[data-attr="avatarBottomColor"]');
          $contentUl.removeClass('hidden');

          switch (val) {//dynamic content for colors
            case 'Overalls':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Bottom Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Jean" title="Jean"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Khaki" title="Khaki"></a></div></li>';
              break;
            case 'Shorts':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Bottom Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Khaki" title="Khaki"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Plaid" title="Plaid"></a></div></li>' ;
              break;
            case 'AthleticPants':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Bottom Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' ;
              break;
            case 'Suspenders':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Bottom Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Khaki" title="Khaki"></a></div></li>' ;
              break;
            case 'Pants':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Bottom Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="BlueJeans" title="BlueJeans"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LightBlueJeans" title="LightBlueJeans"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Khaki" title="Khaki"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Plaid" title="Plaid"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="OrangeRed" title="OrangeRed"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="GreenYellow" title="GreenYellow"></a></div></li>' ;
              break;
            case 'StripeShorts':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Bottom Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Green" title="Green"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' ;
              break;

            default:
          }
          $contentUl.html(html);
          $('li',$contentUl).removeClass().addClass(val);

          $('.style-link',$contentUl).bind('click',function(event){
            event.preventDefault();
            $styleObj.removeClass('hidden');
            $contentUl.addClass('hidden');
          });
//          this.updateDatabase("avatarBottomColor",this.model.get("avatarBottomColor"));
          break;
        case 'avatarGlassesStyle':
          $styleObj = this.$el.find('#hra-avatar-avatar-glasses ul[data-attr="avatarGlassesStyle"]');
          $styleObj.addClass('hidden');
          $contentUl = this.$el.find('#hra-avatar-avatar-glasses ul[data-attr="avatarGlassesColor"]');
          $contentUl.removeClass('hidden');

          switch (val) {//dynamic content for colors
            case 'RayBan':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Glasses Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>';
              break;
            case 'Reader':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Glasses Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>';
              break;
            case 'Star':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Glasses Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Yellow" title="Yellow"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="American" title="American"></a></div></li>';
              break;
            case 'Aviator':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Glasses Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Aviator" title="Aviator"></a></div></li>';
              break;
            case 'Wireframe':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Glasses Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Wireframe" title="Wireframe"></a></div></li>';
              break;
            case 'Sunglasses':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Glasses Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Sunglasses" title="Sunglasses"></a></div></li>';
              break;
            default:
          }
          $contentUl.html(html);
          $('li',$contentUl).removeClass().addClass(val);

          $('.style-link',$contentUl).bind('click',function(event){
            event.preventDefault();
            $styleObj.removeClass('hidden');
            $contentUl.addClass('hidden');
          });

          break;
        case 'avatarHatsStyle':
          $styleObj = this.$el.find('#hra-avatar-avatar-hats ul[data-attr="avatarHatsStyle"]');
          $styleObj.addClass('hidden');
          $contentUl = this.$el.find('#hra-avatar-avatar-hats ul[data-attr="avatarHatsColor"]');
          $contentUl.removeClass('hidden');

          switch (val) {//dynamic content for colors
            case 'TopHat':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Hats Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>';
              break;
            case 'BallCap':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Hats Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Green" title="Green"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>';
              break;
            case 'Bowler':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Hats Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Grey" title="Grey"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>';
              break;
            case 'Cowboy':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Hats Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Green" title="Green"></a></div></li>';
              break;
            case 'Fedora':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Hats Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Gray" title="Gray"></a></div></li>';
              break;
            case 'StockingCap':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Hats Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Grey" title="Grey"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>';
              break;

            default:
          }
          $contentUl.html(html);
          $('li',$contentUl).removeClass().addClass(val);

          $('.style-link',$contentUl).bind('click',function(event){
            event.preventDefault();
            $styleObj.removeClass('hidden');
            $contentUl.addClass('hidden');
          });

          break;
        case 'avatarAccessoriesStyle':
          $styleObj = this.$el.find('#hra-avatar-avatar-accessories ul[data-attr="avatarAccessoriesStyle"]');
          $styleObj.addClass('hidden');
          $contentUl = this.$el.find('#hra-avatar-avatar-accessories ul[data-attr="avatarAccessoriesColor"]');
          $contentUl.removeClass('hidden');

          switch (val) {//dynamic content for colors
            case 'BowTie':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Accessories Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="FullBlack" title="FullBlack"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Gray" title="Gray"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>'+
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="WhiteDotted" title="WhiteDotted"></a></div></li>';
              break;
            case 'Tie':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Accessories Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="FullBlack" title="FullBlack"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Yellow" title="Yellow"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Gray" title="Gray"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>';
              break;
            case 'PocketSquare':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Accessories Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Gray" title="Gray"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Yellow" title="Yellow"></a></div></li>';
              break;
            case 'Boutineer':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Accessories Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Boutineer" title="Boutineer"></a></div></li>';
              break;
            case 'Bolo':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Accessories Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Yellow" title="Yellow"></a></div></li>';
              break;
            case 'Belt':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Accessories Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="ElvisBelt" title="ElvisBelt"></a></div></li>';
              break;
            case 'ElvisHair':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Accessories Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="ElvisHair" title="ElvisHair"></a></div></li>';
              break;
            case 'Camera':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Accessories Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Camera" title="Camera"></a></div></li>';
              break;
            default:
          }
          $contentUl.html(html);
          $('li',$contentUl).removeClass().addClass(val);

          $('.style-link',$contentUl).bind('click',function(event){
            event.preventDefault();
            $styleObj.removeClass('hidden');
            $contentUl.addClass('hidden');
          });

          break;
        case 'avatarShoesStyle':
          $styleObj = this.$el.find('#hra-avatar-avatar-shoes ul[data-attr="avatarShoesStyle"]');
          $styleObj.addClass('hidden');
          $contentUl = this.$el.find('#hra-avatar-avatar-shoes ul[data-attr="avatarShoesColor"]');
          $contentUl.removeClass('hidden');

          switch (val) {//dynamic content for colors
            case 'Tennis':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Shoes Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>';
              break;
            case 'DressShoes':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Shoes Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>';
              break;
            case 'Sandals':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Shoes Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Green" title="Green"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Orange" title="Orange"></a></div></li>';
              break;
            case 'Cowboy':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Shoes Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LightBrown" title="LightBrown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>';
              break;
            case 'Slippers':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Shoes Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LightBrown" title="LightBrown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="BrownBear" title="BrownBear"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="BlackBear" title="BlackBear"></a></div></li>';
              break;
            default:
          }
          $contentUl.html(html);
          $('li',$contentUl).removeClass().addClass(val);

          $('.style-link',$contentUl).bind('click',function(event){
            event.preventDefault();
            $styleObj.removeClass('hidden');
            $contentUl.addClass('hidden');
          });
          break;
        default:

      }
      }
      if(this.model.get('gender')==='female'){
        switch (attr) {
        case 'avatarHairColor':
          $contentUl = this.$el.find('#hra-avatar-avatar-hair ul[data-attr="avatarHairStyle"]');
          $('li',$contentUl).removeClass().addClass(val);
          break;
        case 'avatarFacialHairColor':
          $contentUl = this.$el.find('#hra-avatar-avatar-facial-hair ul[data-attr="avatarFacialHairStyle"]');
          $('li',$contentUl).removeClass().addClass(val);
          break;
        case 'avatarTopStyle':
//          this.model.set('avatarTopColor','Black');
          $styleObj = this.$el.find('#hra-avatar-avatar-top ul[data-attr="avatarTopStyle"]');
          $styleObj.addClass('hidden');
          $contentUl = this.$el.find('#hra-avatar-avatar-top ul[data-attr="avatarTopColor"]');
          $contentUl.removeClass('hidden');

          switch (val) {//dynamic content for colors
            case 'Blouse':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Top Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Diamond" title="Diamond"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Flower" title="Flower"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Maroon" title="Maroon"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pink" title="Pink"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="PinkZigZag" title="PinkZigZag"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><a href="#" class="next"></a></li>' +
                      '<li><a href="#" class="prev"></a></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Teal" title="Teal"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Yellow" title="Yellow"></a></div></li>';
              break;
            case 'Dress':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Top Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="FlowerPattern" title="FlowerPattern"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Maroon" title="Maroon"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pink" title="Pink"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="TanPattern" title="TanPattern"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Teal" title="Teal"></a></div></li>' +
                      '<li><a href="#" class="next"></a></li>' +
                      '<li><a href="#" class="prev"></a></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="VinePattern" title="VinePattern"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Yellow" title="Yellow"></a></div></li>';
              break;
            case 'Sweater':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Top Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Knit" title="Knit"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Maroon" title="Maroon"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pink" title="Pink"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Snowflake" title="Snowflake"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Stripe" title="Stripe"></a></div></li>' +
                      '<li><a href="#" class="next"></a></li>' +
                      '<li><a href="#" class="prev"></a></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Teal" title="Teal"></a></div></li>'+
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Yellow" title="Yellow"></a></div></li>' ;
              break;
            case 'Tshirt':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Top Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="BlackWhiteStripe" title="BlackWhiteStripe"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Flower" title="Flower"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="GreenCremeStripe" title="GreenCremeStripe"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Maroon" title="Maroon"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pink" title="Pink"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><a href="#" class="next"></a></li>' +
                      '<li><a href="#" class="prev"></a></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Teal" title="Teal"></a></div></li>'+
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Yellow" title="Yellow"></a></div></li>' ;
              break;
            case 'TwinSet':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Top Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Maroon" title="Maroon"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pink" title="Pink"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Stripe" title="Stripe"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Teal" title="Teal"></a></div></li>'+
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Yellow" title="Yellow"></a></div></li>'+
                      '<li><a href="#" class="next"></a></li>' +
                      '<li><a href="#" class="prev"></a></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Zebra" title="Zebra"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="ZigZag" title="ZigZag"></a></div></li>';
              break;
            default:
          }
          $contentUl.html(html);
          $('li',$contentUl).removeClass().addClass(val);
          $('li:lt(9)',$contentUl).removeClass('hidden');
          $('li:gt(8)',$contentUl).addClass('hidden');
          $('.style-link',$contentUl).bind('click',function(event){
            event.preventDefault();
            $styleObj.removeClass('hidden');
            $contentUl.addClass('hidden');
          });
          $('.next',$contentUl).bind('click',function(event){
            event.preventDefault();
            $('li',$contentUl).addClass('hidden');
            $('li:gt(8)',$contentUl).removeClass('hidden');
          });
          $('.prev',$contentUl).bind('click',function(event){
            event.preventDefault();
            $('li',$contentUl).addClass('hidden');
            $('li:lt(9)',$contentUl).removeClass('hidden');
          });
//          this.updateDatabase("avatarTopColor",this.model.get("avatarTopColor"));
          break;
        case 'avatarBottomStyle':
//          this.model.set('avatarBottomColor','Black');
//          if(this.model.get('avatarBottomStyle')==="FlareJeans" || this.model.get('avatarBottomStyle')==="SkinnyJeans"){
//            this.model.set('avatarBottomColor','Blue');
//          }
          $styleObj = this.$el.find('#hra-avatar-avatar-bottom ul[data-attr="avatarBottomStyle"]');
          $styleObj.addClass('hidden');
          $contentUl = this.$el.find('#hra-avatar-avatar-bottom ul[data-attr="avatarBottomColor"]');
          $contentUl.removeClass('hidden');

          switch (val) {//dynamic content for colors
            case 'DressPants':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Bottom Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Grey" title="Grey"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Plaid" title="Plaid"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>';
              break;
            case 'FlareJeans':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Bottom Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="AcidWash" title="AcidWash"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="DarkBlue" title="DarkBlue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LightBlue" title="LightBlue"></a></div></li>' ;
              break;
            case 'SkinnyJeans':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Bottom Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="AcidWash" title="AcidWash"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="DarkBlue" title="DarkBlue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LightBlue" title="LightBlue"></a></div></li>' ;
              break;
            case 'SweatPants':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Bottom Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Grey" title="Grey"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>';
              break;
            case 'Skirt':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Bottom Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Maroon" title="Maroon"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="ZigZag" title="ZigZag"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Checkered" title="Checkered"></a></div></li>';
              break;
            default:
          }
          $contentUl.html(html);
          $('li',$contentUl).removeClass().addClass(val);

          $('.style-link',$contentUl).bind('click',function(event){
            event.preventDefault();
            $styleObj.removeClass('hidden');
            $contentUl.addClass('hidden');
          });
//          this.updateDatabase("avatarBottomColor",this.model.get("avatarBottomColor"));
          break;
        case 'avatarGlassesStyle':
          $styleObj = this.$el.find('#hra-avatar-avatar-glasses ul[data-attr="avatarGlassesStyle"]');
          $styleObj.addClass('hidden');
          $contentUl = this.$el.find('#hra-avatar-avatar-glasses ul[data-attr="avatarGlassesColor"]');
          $contentUl.removeClass('hidden');

          switch (val) {//dynamic content for colors
            case 'RayBan':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Glasses Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>';
              break;
            case 'Reader':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Glasses Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Teal" title="Teal"></a></div></li>';
              break;
            case 'Oversized':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Glasses Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Maroon" title="Maroon"></a></div></li>';
              break;
            case 'CatEye':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Glasses Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pink" title="Pink"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>';
              break;
            case 'Wireframe':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Glasses Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Wireframe" title="Wireframe"></a></div></li>';
              break;
            case 'Sunglasses':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Glasses Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Sunglasses" title="Sunglasses"></a></div></li>';
              break;
            default:
          }
          $contentUl.html(html);
          $('li',$contentUl).removeClass().addClass(val);

          $('.style-link',$contentUl).bind('click',function(event){
            event.preventDefault();
            $styleObj.removeClass('hidden');
            $contentUl.addClass('hidden');
          });

          break;
        case 'avatarHatsStyle':
          $styleObj = this.$el.find('#hra-avatar-avatar-hats ul[data-attr="avatarHatsStyle"]');
          $styleObj.addClass('hidden');
          $contentUl = this.$el.find('#hra-avatar-avatar-hats ul[data-attr="avatarHatsColor"]');
          $contentUl.removeClass('hidden');

          switch (val) {//dynamic content for colors
            case 'BallCap':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Hats Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Teal" title="Teal"></a></div></li>';
              break;
            case 'Beret':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Hats Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Maroon" title="Maroon"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>';
              break;
            case 'CowBoy':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Hats Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pink" title="Pink"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>';
              break;
            case 'Kentucky':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Hats Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Blck"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Peach" title="Peach"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>';
              break;
            case 'PageBoy':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Hats Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Grey" title="Grey"></a></div></li>';
              break;
            case 'Stocking':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Hats Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>';
              break;
            case 'Visor':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Hats Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Visor" title="Visor"></a></div></li>';
              break;
            case 'HeadDress':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Hats Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="HeadDress" title="HeadDress"></a></div></li>';
              break;
            case 'HeadBand':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Accessories Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pink" title="Pink"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="BlueStripes" title="BlueStripes"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="YellowBlueStripe" title="YellowBlueStripe"></a></div></li>';
              break;
            case 'Bow':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Accessories Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pink" title="Pink"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Diamond" title="Diamond"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="CrazyPattern" title="CrazyPattern"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="ZigZag" title="ZigZag"></a></div></li>';
              break;
            default:
          }
          $contentUl.html(html);
          $('li',$contentUl).removeClass().addClass(val);

          $('.style-link',$contentUl).bind('click',function(event){
            event.preventDefault();
            $styleObj.removeClass('hidden');
            $contentUl.addClass('hidden');
          });

          break;
        case 'avatarJewelryStyle':
          $styleObj = this.$el.find('#hra-avatar-avatar-jewelry ul[data-attr="avatarJewelryStyle"]');
          $styleObj.addClass('hidden');
          $contentUl = this.$el.find('#hra-avatar-avatar-jewelry ul[data-attr="avatarJewelryColor"]');
          $contentUl.removeClass('hidden');

          switch (val) {//dynamic content for colors
            case 'Necklace':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Jewelry Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pearl" title="Pearl"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Ruby" title="Ruby"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Gold" title="Gold"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Amethyst" title="Amethyst"></a></div></li>' ;
              break;
            case 'Locket':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Jewelry Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Silver" title="Silver"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Amethyst" title="Amethyst"></a></div></li>'+
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Gold" title="Gold"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Ruby" title="Ruby"></a></div></li>' ;
              break;
            case 'Earrings':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Jewelry Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Gold" title="Gold"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Silver" title="Silver"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Amethyst" title="Amethyst"></a></div></li>'+
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Ruby" title="Ruby"></a></div></li>' ;
              break;
            case 'Studs':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Jewelry Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pearl" title="Pearl"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Ruby" title="Ruby"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Gold" title="Gold"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Amethyst" title="Amethyst"></a></div></li>' ;
              break;
            case 'Broach':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Jewelry Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Ruby" title="Ruby"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pearl" title="Pearl"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Gold" title="Gold"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Amethyst" title="Amethyst"></a></div></li>' ;
              break;
            case 'Jade':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Jewelry Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Jade" title="Jade"></a></div></li>' ;
              break;

            default:
          }
          $contentUl.html(html);
          $('li',$contentUl).removeClass().addClass(val);

          $('.style-link',$contentUl).bind('click',function(event){
            event.preventDefault();
            $styleObj.removeClass('hidden');
            $contentUl.addClass('hidden');
          });

          break;
        case 'avatarAccessoriesStyle':
          $styleObj = this.$el.find('#hra-avatar-avatar-accessories ul[data-attr="avatarAccessoriesStyle"]');
          $styleObj.addClass('hidden');
          $contentUl = this.$el.find('#hra-avatar-avatar-accessories ul[data-attr="avatarAccessoriesColor"]');
          $contentUl.removeClass('hidden');

          switch (val) {//dynamic content for colors
            case 'Purse':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Accessories Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pink" title="Pink"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>';
              break;
            case 'Scarf':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Accessories Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blue" title="Blue"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pink" title="Pink"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purple" title="Purple"></a></div></li>';
              break;
            case 'Camera':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Accessories Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Camera" title="Camera"></a></div></li>';
              break;
            default:
          }
          $contentUl.html(html);
          $('li',$contentUl).removeClass().addClass(val);

          $('.style-link',$contentUl).bind('click',function(event){
            event.preventDefault();
            $styleObj.removeClass('hidden');
            $contentUl.addClass('hidden');
          });

          break;
        case 'avatarShoesStyle':
          $styleObj = this.$el.find('#hra-avatar-avatar-shoes ul[data-attr="avatarShoesStyle"]');
          $styleObj.addClass('hidden');
          $contentUl = this.$el.find('#hra-avatar-avatar-shoes ul[data-attr="avatarShoesColor"]');
          $contentUl.removeClass('hidden');

          switch (val) {//dynamic content for colors
            case 'Heals':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Shoes Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Cheetah" title="Cheetah"></a></div></li>';
              break;
            case 'Cowboy':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Shoes Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LightBrown" title="LightBrown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>';
              break;
            case 'Boots':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Shoes Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="RedBrown" title="RedBrown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LightBrown" title="LightBrown"></a></div></li>';
              break;
            case 'Sandals':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Shoes Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Silver" title="Silver"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>';
              break;
            case 'Slippers':
              html = '<h2><a class="style-link"><span></span>Styles</a>Choose a Shoes Color</h2>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LightBrown" title="LightBrown"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>' +
                      '<li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Bunny" title="Bunny"></a></div></li>';
              break;
            default:
          }
          $contentUl.html(html);
          $('li',$contentUl).removeClass().addClass(val);

          $('.style-link',$contentUl).bind('click',function(event){
            event.preventDefault();
            $styleObj.removeClass('hidden');
            $contentUl.addClass('hidden');
          });
          break;
        default:

      }
      }
      //Todo update seleted
    }

  });

  var nextprevHandler = function($contentUl,$styleObj){
    $('li:lt(9)', $contentUl).removeClass('hidden');
    $('li:gt(8)', $contentUl).addClass('hidden');
    $('.style-link', $contentUl).bind('click', function(event) {
      event.preventDefault();
      if($styleObj)$styleObj.removeClass('hidden');
      $contentUl.addClass('hidden');
    });
    $('.next', $contentUl).bind('click', function(event) {
      event.preventDefault();
      $('li', $contentUl).addClass('hidden');
      $('li:gt(8)', $contentUl).removeClass('hidden');

    });
    $('.prev', $contentUl).bind('click', function(event) {
      event.preventDefault();
      $('li', $contentUl).addClass('hidden');
      $('li:lt(9)', $contentUl).removeClass('hidden');
    });
  };

  exports.initialize = function( options ) {
    appOptions = options || {};

    var avatar ,avatarView;
//    if ( appOptions.model ) {
//      avatar = exports.avatar = appOptions.model;
//      avatarView = new AvatarView({ model: avatar });
//    } else if (appOptions.userConfig) {
//      avatar = exports.avatar = createModel(appOptions.userConfig);
//      avatarView = new AvatarView({
//        model: avatar
//      });
//    } else {
//      $.ajax({
//        url: "/v2/health/hra/uhchraajax/dashboard",
//        dataType: 'json',
//        cache:false,
//        success: function(msg) {
//          if ( !msg ) return;
//          if (typeof msg.msg == "string") {
//            // console.log(msg.msg);
//          } else if (typeof msg.errMsg == "string") {
//            // console.log(msg.errMsg);
//          } else {
//            avatar = createModel(msg);
//            avatarView = new AvatarView({
//              model: avatar
//            });
//
//
//          }
//        }});
//    }
    var msg = null;
    avatar = createModel(msg);
          avatarView = new AvatarView({
            model: avatar
          });


//    if(gender === 'male') avatar = new AvatarMale({'gender':gender,'userid':userid});
//    else avatar = new AvatarFemale({'gender':gender,'userid':userid});






    //for testing
    $('#hra-create-scale').live('click',function(){
      var scale = $("#hra-scale-value").val(), $avatarObj;
//      console.log("scale="+scale);
//      exports.scaleAvatar(scale);

      //test getOrigAvatarElement
//      $avatarObj =  exports.getOrigAvatarElement(2);
//      $('.hra-avatar-scale').addClass("hra-avatar-builder").append($avatarObj);
//
//      //test getScaleAvatarElement
//      $avatarObj =  exports.getScaleAvatarElement($(".hra-avatar-scale"),scale);
//      $('.hra-avatar-small').html($avatarObj.html());
    });

  };

  /**
   * Returns a scaled avatar element given an avatar model
   */
  exports.getAvatar = function( model, scale, callback ) {
    var
      $avatar = buildView( model ),
      $hidden = $( '<div></div>' );

    $hidden
      .addClass( 'hra-avatar-builder' )
      .css({
        'width': 0,
        'height': 0,
        'position': 'absolute',
        'top': 0
      })
      .append( $avatar )
      .appendTo( 'body' );

    callback( exports.getScaleAvatarElement( $hidden, scale ).addClass( 'hra-avatar-image' ) );
  }

  exports.scaleAvatar = function(scale){
    var $html = $("<div></div>") ,
        $preview = $(".hra-avatar-builder-preview"),
        $img,imgP,imgT,imgL,imgW,imgH,imgSrc,imgZindex;
    $('.gender >div', $preview).each(function(index,val){
      imgSrc = $(val).css("background-image").replace(/^url|[\(\)]/g, '').replace(/"/g, '');
      if (imgSrc !== "none") {
        $img = $('<img style="position:absolute;" />')
        imgZindex = $(val).css("z-index");
        imgW = $(val).width()*scale;
        imgH = $(val).height()*scale;
        imgP = $(val).position();
        imgL = imgP.left *scale;
        imgT = imgP.top*scale;

        // console.log(imgSrc);
        $img.attr("src", imgSrc).css("z-index", imgZindex).css("src", imgSrc).css("width", imgW +'px').css("height", imgH +'px')
                .css("left", imgL +'px').css("top", imgT +'px');
        $html.append($img);
      }
    });

    $('.hra-avatar-scale').html($html.html());
  };
  exports.getOrigAvatarElement = function(callback){
    //todo: add gender in user
    var $avatarObj , avatarmodel;

    if (appOptions.userConfig) {
      var avatarmodel = createModel(appOptions.userConfig);
      var $avatarObj = buildView(avatarmodel);
      callback($avatarObj);
    } else {
      $.ajax({
        url: "/v2/health/hra/uhchraajax/dashboard",
        dataType: 'json',
        cache: false,
        success: function(msg) {
          if ( !msg ) return;
          if (typeof msg.msg == "string") {
            // console.log(msg.msg);
          } else if (typeof msg.errMsg == "string") {
            // console.log(msg.errMsg);
          } else {
            avatarmodel = createModel(msg);
            $avatarObj = buildView(avatarmodel);
            callback($avatarObj);
          }
        }});
      }
        // return  $avatarObj;

  };
  var  createModel = function(msg){
    if(!msg){msg={'user':{'sex':'F','level':9}}}
    var $genderObj, $attrObj,$preview,genderdata = msg["user"]["sex"]||"M",gender, avatarmodel, attrArray =  msg["user"]["attr"];
    var level = msg["user"]["level"]||1;
    if(msg["progress"] && msg["progress"]["highestLevel"])level = msg["progress"]["highestLevel"]["numValue"]||level;
    if(genderdata === "F") gender = "female";
    else gender = "male";
    if(gender === 'female') avatarmodel = new AvatarFemale({'gender':gender});
    else avatarmodel = new AvatarMale({'gender':gender});
    //update model from json data
    for(var key in attrArray){
       if(key.indexOf("avatar")>-1){
        avatarmodel.set(key,attrArray[key] && attrArray[key][key]);
      }
    }
    avatarmodel.set('level',level);
    return avatarmodel;

  };
  var buildView = exports.buildView = function(avatarmodel){
    // reference to preview div
      var $preview = $('<div class="hra-avatar-builder-preview"></div>'),
       $genderObj = $('<div class="gender"></div>'),
       $attrObj;
      //initialize dom
      $genderObj.addClass(avatarmodel.get("gender"));
      $attrObj = $('<div class="avatarSkin"></div>');
      $attrObj.addClass(avatarmodel.get('avatarSkin'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarHairStyle avatarHairColor"></div>');
      $attrObj.addClass(avatarmodel.get('avatarHairStyle')).addClass(avatarmodel.get('avatarHairColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarFacialHairStyle avatarFacialHairColor"></div>');
      $attrObj.addClass(avatarmodel.get('avatarFacialHairStyle')).addClass(avatarmodel.get('avatarFacialHairColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarTopStyle avatarTopColor"></div>');
      $attrObj.addClass(avatarmodel.get('avatarTopStyle')).addClass(avatarmodel.get('avatarTopColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarShoesStyle avatarShoesColor"></div>');
      $attrObj.addClass(avatarmodel.get('avatarShoesStyle')).addClass(avatarmodel.get('avatarShoesColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarBottomStyle avatarBottomColor"></div>');
      $attrObj.addClass(avatarmodel.get('avatarBottomStyle')).addClass(avatarmodel.get('avatarBottomColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarGlassesStyle avatarGlassesColor"></div>');
      $attrObj.addClass(avatarmodel.get('avatarGlassesStyle')).addClass(avatarmodel.get('avatarGlassesColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarHatsStyle avatarHatsColor"></div>');
      $attrObj.addClass(avatarmodel.get('avatarHatsStyle')).addClass(avatarmodel.get('avatarHatsColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarJewelryStyle avatarJewelryColor"></div>');
      $attrObj.addClass(avatarmodel.get('avatarJewelryStyle')).addClass(avatarmodel.get('avatarJewelryColor'));
      $genderObj.append($attrObj);
      $attrObj = $('<div class="avatarAccessoriesStyle avatarAccessoriesColor"></div>');
      $attrObj.addClass(avatarmodel.get('avatarAccessoriesStyle')).addClass(avatarmodel.get('avatarAccessoriesColor'));
      $genderObj.append($attrObj);

      $preview.append($genderObj);

    return $preview;

  };


  exports.getScaleAvatarElement = function($avatarObj, scale){
     var $html = $('<div style="position:relative;"></div>') ,
//        $preview = $(".hra-avatar-builder-preview"),
        $preview = $avatarObj,
        $img,imgP,imgT,imgL,imgW,imgH,imgSrc,imgZindex;
    $('.gender >div', $preview).each(function(index,val){
      imgSrc = $(val).css("background-image").replace(/^url|[\(\)]/g, '').replace(/"/g, '');
      if (imgSrc !== "none") {
        $img = $('<img style="position:absolute;" />') ;
        imgZindex = $(val).css("z-index");
        imgW = $(val).width()*scale;
//        imgH = $(val).height()*scale;
        imgP = $(val).position();
        imgL = imgP.left *scale;
        imgT = imgP.top*scale;


        $img.attr("src", imgSrc).css("z-index", imgZindex).css("src", imgSrc).css("width", imgW +'px').css("height", 'null')
                .css("left", imgL +'px').css("top", imgT +'px');
        $html.append($img);
      }
    });
    return $html;
  } ;


  return exports;

});